<template>
	<view class="conter">

		<view class="">
			<header-box :title="title"></header-box>
		</view>

		<view class="box-info1">
			<block v-for="(item, index) in list" :key="index">
				<view class="box1">
					<view class="box1-left" @click="image">
						<view class="box1-left-image">
							<image class="w148 h148" :src="imgs + item.image" mode=""></image>
						</view>
						<!-- <view class="displex-box">
							4张
						</view> -->
					</view>
					<view class="" style=" color: #717171;">
						<view class="flex justify-between align-center">
							<view class="" style="font-size: 30rpx; color: #000000;">
								{{item.title}}
							</view>
							<view class="money">
								￥{{item.money}}
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="" style="margin: 10rpx 0;">
								<u-icon name="clock" color="#717171" style="margin-right: 10rpx;"></u-icon>
								上传时间: {{item.createtime}}
							</view>
							<view class="bgc1" @tap="jwup(item.id)" v-if="userId == item.uid">
								<!-- <text class="cuIcon-delete"></text> -->
								<text class="bgc">
									下架
								</text>
							</view>
						</view>
						<view class="">
							<u-icon name="map" color="#717171" style="margin-right: 10rpx;"></u-icon>
							地址：{{item.address}}
						</view>
					</view>
				</view>

				<view class="ptop margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.dating"
					:key="id">
					<view class="flex align-center justify-between">
						<view class="">
							大厅示图
						</view>
						<view>楼层信息：{{item1.loceng}}</view>
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>

				<view class="ptop margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.wutai"
					:key="id">
					<view>
						舞台图
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>

				<view class="ptop margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.led"
					:key="id">
					<view>
						LED图
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">像素：{{item1.textP}}</text>
					</view>
				</view>


				<view class="ptop margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.xuting"
					:key="id">
					<view class="flex align-center justify-between">
						<view class="">
							序列图
						</view>
						<view>序厅信息：{{item1.xuting}}</view>
						<view>楼层信息：{{item1.loceng}}</view>
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>

				<view class="ptop margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.huoti"
					:key="id">
					<view>
						货梯图
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>

				<view class="ptop margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.jiedian"
					:key="id">
					<view class="flex align-center justify-between">
						<view class="">
							接电示图
						</view>
						<view>楼层信息：{{item1.loceng}}</view>
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>


				<!-- buy: 1买过,  v-if="item.buy != 1" v-if="userId != item.uid" 0没有买过 -->
				<view class="add" v-if="userId != item.uid">
					<button v-if="item.buy != 1" class="cu-btn wh100 h80 r50" @tap="buy(item)"
						style="background-color: #3B43BF; color:#fff">
						立即购买 {{item.money}}
					</button>
				</view>

			</block>
		</view>


		<u-modal v-model="show" :show-cancel-button="true" @confirm="confirm" :content="content"></u-modal>



	</view>
</template>

<script>
	var uid = uni.getStorageSync('uid');

	export default {
		components: {},
		data() {
			return {
				title: '图册详情',
				count: 4,
				value: 2,
				list: [],
				img: [],
				info: '',
				listId: '',
				show: false,
				content: '确定删除!',
				listId: '',
				buyInfo: {},
				imgs: this.$images,
				userId: uni.getStorageSync('uid'),
			}
		},

		onLoad(e) {
			this.info = e.id
			uni.setStorageSync('orderId', this.info)
			this.listInfo()
		},
		onReachBottom() {},
		methods: {

			phone1(urls) {
				uni.previewImage({
					urls: [urls],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			async listInfo() {
				const res = await this.$u.post('api/hotel/details', {
					id: uni.getStorageSync('orderId'),
					uid: uni.getStorageSync('uid')
				})
				this.list = res.data
				this.listId = res.data[0].id
			},

			jwup(id) {
				this.show = true
				this.listId = id
				console.log(id)
			},

			async confirm() {

				const res = await this.$u.post('api/hotel.Index/delete1', {
					id: this.listId,
					uid: uni.getStorageSync('uid'),
				})

				if (res.code == 1) {
					this.$tools.msg(res.msg)

					uni.navigateBack({
						delta: 1
					})
				}
			},

			gotoPhonInfo() {
				uni.navigateTo({
					url: '/pages/site/uploadPhone?info=' + this.info
				})
			},



			image() {
				console.log(9999);
				uni.previewImage({
					urls: [...this.img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},

			// 购买 http://wumei.qianjitianxia.com/addons/epay/index/buy
			async buy(item) {
				console.log('item==>', item);
				this.buyInfo = item
				console.log('thi.res.data', this.buyInfo)
				var that = this
				const res = await this.$u.post('addons/epay/index/buy', {
					id: item.id,
					uid: uni.getStorageSync('uid'),
					amount: item.money,
					title: item.title,
					openid: uni.getStorageSync('openid')
				})

				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: 'MD5',
					paySign: res.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						that.$tools.msg('购买成功!')
						that.listInfo()
						that.buyGoodsList()
						console.log('购买成功:');
					},
					fail: function(err) {
						that.$tools.msg('购买失败!')
					}
				});

			},

			// 购买成功  https://wumei.qianjitianxia.com/api/hotel.Index/add_mx
			async buyGoodsList() {
				console.log('购买成功购买成功购买成功购买成功 ')
				const res = await this.$u.post('api/hotel/add_mx', {
					user_id: this.buyInfo.user_id, // 商品的拥有者id
					money: this.buyInfo.money,
					buyer_id: uni.getStorageSync('uid'), // 购买者的id
				})
			},



			// 复制文本
			copy() {
				uni.setClipboardData({
					data: 'hello',
					success: function() {
						console.log('success');
						// this.$tools.msg('复制成功')
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	width: 100%;
	// 	height: 100%;
	// 	background-color: #FFFFFF;
	// }

	.conter {
		width: 100%;
		// height: 100vh;
		// padding: 0 30rpx;
		// background-color: #FFFFFF;

		.left-box {

			.left-image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
				border-radius: 30rpx !important;

				image {
					width: 100%;
					height: 100%;
					border-radius: 30rpx !important;
				}
			}
		}

		.money {
			width: 160rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			color: #FF0000;
			background-color: #FFE5E5;
		}

		.box-info1 {
			width: 100%;
			height: 240rpx;
			margin-top: 30rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #F8F8F8;

			.ptop {
				padding: 10rpx;
			}

			.box1 {
				padding: 10rpx;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;

				.bgc1 {

					.bgc {
						// width: 300rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						padding: 10rpx 30rpx;
						background-color: #EEEEEE;
					}
				}

				.box1-left {
					width: 148rpx;
					height: 148rpx;
					border-radius: 10rpx;
					margin-right: 30rpx;


				}
			}
		}



		.box2 {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
		}


		.user-info {
			width: 100%;
			// height: 100rpx;
			// line-height: 100rpx;
			color: #232323;
			border-radius: 10rpx;
			padding: 20rpx;
			background-color: #F8F8F8;

			.user-info-left {
				display: flex;
				align-items: center;
			}

			.user-image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;

				image {
					border-radius: 10rpx;
				}
			}

			.box3 {
				height: 80rpx;
				display: flex;
				align-items: center;
			}
		}


		.bgc {
			height: 90rpx;
			line-height: 90rpx;
			padding-left: 30rpx;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			color: #3B43BF;
		}

		.bgc-text {
			padding: 10rpx 25rpx;
			border-radius: 35rpx;
			color: #717171;
			background-color: #F8F8F8;
		}





		.buy {
			width: 100%;
			height: 100rpx;
			// position: fixed;
			bottom: 70rpx;
			left: 0;
			color: #000000;
			padding: 0 30rpx;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;

			.puy-btn {
				width: 240rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				border-radius: 35rpx;
				background-color: #3B43BF;
			}
		}
	}

	.add {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		transform: translateX(-50%);
	}
</style>
